<template>
    <el-container class="jd-container">
        <!-- 左侧导航 -->
        <el-aside width="200px" class="side-nav">
            <div class="user-info">
                <el-avatar :src="userInfo.headPicture" :size="60" />
                <div class="username">{{ userInfo.name }}</div>
            </div>

            <el-menu class="nav-menu" :default-active="activeMenu" @select="handleMenuSelect">
                <el-menu-item index="1">
                    <i class="el-icon-s-order"></i>
                    <span>我的订单</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <i class="el-icon-chat-line-round"></i>
                    <span>评价管理</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <i class="el-icon-wallet"></i>
                    <span>京东白条</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <i class="el-icon-present"></i>
                    <span>优惠券</span>
                </el-menu-item>
            </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-main class="main-content" v-loading="listLoading">
            <!-- 订单页面内容 -->
            <div v-if="activeMenu === '1'" class="order-content">
                <!-- WebSocket消息提示 -->
                <transition name="el-fade-in">
                    <el-alert v-if="socketMessage" :title="socketMessage" type="info" :closable="false"
                        class="socket-notification" />
                </transition>

                <!-- 订单状态分类 -->
                <div class="order-status-tabs">
                    <el-tabs v-model="activeStatus" @tab-click="handleTabChange">
                        <el-tab-pane label="全部订单" name="all">
                            <span slot="label">
                                全部订单
                                <el-badge v-if="orderCounts.all > 0" :value="orderCounts.all" class="badge-item" />
                            </span>
                        </el-tab-pane>
                        <el-tab-pane label="待付款" name="unpaid">
                            <span slot="label">
                                待付款
                                <el-badge v-if="orderCounts.unpaid > 0" :value="orderCounts.unpaid"
                                    class="badge-item" />
                            </span>
                        </el-tab-pane>
                        <el-tab-pane label="待发货" name="unsent">
                            <span slot="label">
                                待发货
                                <el-badge v-if="orderCounts.unsent > 0" :value="orderCounts.unsent"
                                    class="badge-item" />
                            </span>
                        </el-tab-pane>
                        <el-tab-pane label="已签收" name="finished">
                            <span slot="label">
                                已签收
                                <el-badge v-if="orderCounts.finished > 0" :value="orderCounts.finished"
                                    class="badge-item" />
                            </span>
                        </el-tab-pane>
                        <el-tab-pane label="待评价" name="unreviewed">
                            <span slot="label">
                                待评价
                                <el-badge v-if="orderCounts.unreviewed > 0" :value="orderCounts.unreviewed"
                                    class="badge-item" />
                            </span>
                        </el-tab-pane>
                    </el-tabs>
                </div>

                <!-- 订单列表 -->
                <div class="order-list" v-if="filteredOrders.length > 0">
                    <div class="order-item" v-for="order in filteredOrders" :key="order.id">
                        <div class="order-header">
                            <span class="order-time">{{ formatDateTime(order.updateTime) }}</span>
                            <span class="order-no">订单号：{{ order.id }}</span>
                            <el-tag v-if="order.isSeckill === 1" size="mini" type="danger" style="margin-right: 10px;">
                                秒杀
                            </el-tag>
                            <el-tag size="mini" :type="getStatusType(order.status)">
                                {{ getStatusText(order.status) }}
                            </el-tag>
                        </div>

                        <div class="order-body">
                            <div class="goods-info">
                                <el-image :src="order.image" class="goods-img" fit="cover"
                                    :preview-src-list="[order.image]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <div class="goods-detail">
                                    <div class="goods-title" :title="order.goodsId">
                                        {{ truncateText(order.goodsId, 50) }}
                                    </div>
                                    <div class="goods-spec">数量：{{ order.quantity || 1 }}</div>
                                    <div class="receiver-info" v-if="order.receiverName">
                                        收货人：{{ order.receiverName }} {{ order.receiverPhone }}
                                    </div>
                                    <div class="address" v-if="order.address" :title="order.address">
                                        地址：{{ truncateText(order.address, 30) }}
                                    </div>
                                </div>
                            </div>

                            <div class="price-info">
                                <div class="amount">¥{{ formatPrice(order.price) }}</div>
                                <div class="quantity">x{{ order.quantity || 1 }}</div>
                                <div class="total-amount">
                                    总计：¥{{ formatPrice(order.price * (order.quantity || 1)) }}
                                </div>
                            </div>

                            <div class="action-btns">
                                <!-- 待付款 -->
                                <el-button v-if="order.status === 0" type="danger" size="small"
                                    @click="handlePayment(order)">
                                    立即支付
                                </el-button>

                                <!-- 派送中 - 确认收货 -->
                                <el-button v-if="order.status === 5" type="success" size="small"
                                    @click="handleConfirmReceipt(order)">
                                    确认收货
                                </el-button>

                                <!-- 已签收 - 已确认 -->
                                <el-button v-if="order.status === 6" type="info" size="small" disabled>
                                    已确认收货
                                </el-button>

                                <!-- 查看物流 (非已签收状态) -->
                                <el-button v-if="order.status !== 6 && order.status !== 0" type="primary" size="small"
                                    @click="showLogistics(order)">
                                    查看物流
                                </el-button>

                                <!-- 立即评价 (已签收) -->
                                <el-button v-if="order.status === 6" type="warning" size="small"
                                    @click="handleReview(order)">
                                    立即评价
                                </el-button>

                                <!-- 订单详情 -->
                                <el-button type="text" size="small" @click="viewOrderDetail(order)">
                                    订单详情
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 空状态 -->
                <el-empty v-else description="暂无订单数据" :image-size="120"></el-empty>

                <!-- 分页 -->
                <div class="pagination" v-if="total > pageSize">
                    <el-pagination background layout="prev, pager, next, jumper, total" :total="total"
                        :page-size="pageSize" :current-page="currentPage" @current-change="handlePageChange" />
                </div>
            </div>

            <!-- 优惠券页面 -->
            <div v-if="activeMenu === '4'" class="coupon-page">
                <Mycoupon />
            </div>

            <!-- 其他菜单页面占位 -->
            <div v-if="activeMenu === '2'" class="other-page">
                <el-empty description="评价管理功能开发中" :image-size="120"></el-empty>
            </div>
            <div v-if="activeMenu === '3'" class="other-page">
                <el-empty description="京东白条功能开发中" :image-size="120"></el-empty>
            </div>
        </el-main>

        <!-- 订单详情弹窗 -->
        <el-dialog title="订单详情" :visible.sync="detailDialogVisible" width="600px" :close-on-click-modal="false">
            <div v-if="currentOrder">
                <el-descriptions :column="2" border size="medium">
                    <el-descriptions-item label="订单号" :span="2">
                        {{ currentOrder.id }}
                    </el-descriptions-item>
                    <el-descriptions-item label="订单状态" :span="2">
                        <el-tag :type="getStatusType(currentOrder.status)">
                            {{ getStatusText(currentOrder.status) }}
                        </el-tag>
                        <el-tag v-if="currentOrder.isSeckill === 1" type="danger" size="mini"
                            style="margin-left: 10px;">
                            秒杀订单
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="商品ID" :span="2">
                        {{ currentOrder.goodsId }}
                    </el-descriptions-item>
                    <el-descriptions-item label="商品图片" :span="2">
                        <el-image :src="currentOrder.image" style="width: 80px; height: 80px"
                            :preview-src-list="[currentOrder.image]">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </el-descriptions-item>
                    <el-descriptions-item label="单价">
                        ¥{{ formatPrice(currentOrder.price) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="数量">
                        {{ currentOrder.quantity || 1 }}
                    </el-descriptions-item>
                    <el-descriptions-item label="总金额" :span="2">
                        <span style="color: #e4393c; font-size: 16px; font-weight: bold;">
                            ¥{{ formatPrice(currentOrder.price * (currentOrder.quantity || 1)) }}
                        </span>
                    </el-descriptions-item>
                    <el-descriptions-item label="收货人">
                        {{ currentOrder.receiverName || '无' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="联系电话">
                        {{ currentOrder.receiverPhone || '无' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="收货地址" :span="2">
                        {{ currentOrder.address || '无' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="创建时间" :span="2">
                        {{ formatDateTime(currentOrder.createTime) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="更新时间" :span="2">
                        {{ formatDateTime(currentOrder.updateTime) }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="detailDialogVisible = false">关闭</el-button>
                <el-button v-if="currentOrder && currentOrder.status === 5" type="success"
                    @click="handleConfirmReceipt(currentOrder)">
                    确认收货
                </el-button>
                <el-button v-if="currentOrder && currentOrder.status === 0" type="danger"
                    @click="handlePayment(currentOrder)">
                    立即支付
                </el-button>
            </span>
        </el-dialog>

        <!-- 物流信息弹窗 -->
        <el-dialog title="物流跟踪" :visible.sync="logisticsDialogVisible" width="700px" :close-on-click-modal="false"
            class="logistics-dialog">
            <div v-loading="logisticsLoading">
                <div v-if="logisticsInfo">
                    <!-- 物流概览信息 -->
                    <el-card class="logistics-overview" shadow="never">
                        <div class="overview-header">
                            <div class="status-info">
                                <el-tag :type="getLogisticsStatusType(logisticsInfo.status)" size="medium">
                                    {{ logisticsInfo.statusText || '物流中' }}
                                </el-tag>
                                <span class="order-id">订单号：{{ logisticsInfo.orderId }}</span>
                            </div>
                            <div class="address-info">
                                <i class="el-icon-location-outline"></i>
                                <span>{{ logisticsInfo.address }}</span>
                            </div>
                        </div>
                    </el-card>

                    <!-- 物流轨迹时间线 -->
                    <div class="logistics-timeline">
                        <el-timeline v-if="logisticsInfo.traces && logisticsInfo.traces.length > 0">
                            <el-timeline-item v-for="(trace, index) in logisticsInfo.traces" :key="trace.id || index"
                                :timestamp="formatDateTime(trace.time)" placement="top"
                                :type="index === 0 ? 'primary' : 'info'" :size="index === 0 ? 'large' : 'normal'"
                                :icon="index === 0 ? 'el-icon-check' : null">
                                <el-card :class="['trace-card', index === 0 ? 'latest' : '']" shadow="hover">
                                    <div class="trace-content">
                                        <div class="trace-description">
                                            {{ trace.description }}
                                        </div>
                                        <div class="trace-location" v-if="trace.location">
                                            <i class="el-icon-location"></i>
                                            {{ trace.location }}
                                        </div>

                                        <!-- 快递员信息区域 -->
                                        <div class="courier-info"
                                            v-if="trace.courierName || trace.courierPhone || trace.courierId">
                                            <el-divider content-position="left">
                                                <i class="el-icon-user"></i> 快递员信息
                                            </el-divider>
                                            <div class="courier-details">
                                                <el-tag v-if="trace.courierName" size="small" type="success"
                                                    class="courier-tag">
                                                    <i class="el-icon-user-solid"></i> {{ trace.courierName }}
                                                </el-tag>
                                                <el-tag v-if="trace.courierPhone" size="small" type="warning"
                                                    class="courier-tag">
                                                    <i class="el-icon-phone"></i> {{ trace.courierPhone }}
                                                </el-tag>
                                                <el-tag v-if="trace.courierId" size="small" type="info"
                                                    class="courier-tag">
                                                    <i class="el-icon-postcard"></i> 工号: {{ trace.courierId }}
                                                </el-tag>
                                            </div>
                                        </div>

                                        <!-- 备注信息 -->
                                        <div class="trace-remark" v-if="trace.remark">
                                            <el-tag size="mini" type="info">
                                                <i class="el-icon-document"></i> {{ trace.remark }}
                                            </el-tag>
                                        </div>
                                    </div>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>

                        <!-- 无物流信息提示 -->
                        <el-empty v-else description="暂无物流信息" :image-size="100"></el-empty>
                    </div>

                    <!-- 物流更新时间 -->
                    <div class="logistics-footer" v-if="logisticsInfo.updateTime">
                        <span class="update-time">
                            最后更新时间：{{ formatDateTime(logisticsInfo.updateTime) }}
                        </span>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="logisticsDialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="refreshLogistics" :loading="logisticsLoading">
                    <i class="el-icon-refresh"></i> 刷新
                </el-button>
            </span>
        </el-dialog>
    </el-container>
</template>

<script>
import { getList, confirmReceipt, showLogistics } from '@/api/user/order'
import { getUser } from '@/api/admin/User'
import Mycoupon from '@/components/User/coupon/Mycoupon.vue'

export default {
    name: 'OrderManagement',

    components: {
        Mycoupon
    },

    data() {
        return {
            // 分页相关
            currentPage: 1,
            pageSize: 10,
            total: 0,

            // 数据相关
            goodsList: [],

            // 用户信息
            userInfo: {
                headPicture: '',
                name: ''
            },

            // WebSocket相关
            socketMessage: '',
            socketTimer: null,
            socket: null,

            // 订单详情弹窗
            detailDialogVisible: false,
            currentOrder: null,

            // 物流信息弹窗
            logisticsDialogVisible: false,
            logisticsInfo: null,
            logisticsLoading: false,
            currentLogisticsOrderId: null,

            // 状态控制
            listLoading: false,
            activeStatus: 'all',
            activeMenu: '1',

            // 状态映射
            statusTextMap: {
                0: '待付款',
                1: '已下单',
                2: '仓库处理中',
                3: '已揽收',
                4: '运输中',
                5: '派送中',
                6: '已签收',
                7: '待评价'
            },
            statusTypeMap: {
                0: 'danger',
                1: 'info',
                2: 'info',
                3: 'primary',
                4: 'primary',
                5: 'warning',
                6: 'success',
                7: 'warning'
            },
        }
    },

    computed: {
        // 过滤后的订单列表
        filteredOrders() {
            if (this.activeStatus === 'all') {
                return this.goodsList
            }

            const statusMap = {
                unpaid: [0],
                unsent: [1, 2],
                finished: [6],
                unreviewed: [7]
            }

            const targetStatus = statusMap[this.activeStatus]
            return this.goodsList.filter(order =>
                targetStatus.includes(order.status)
            )
        },

        // 订单数量统计
        orderCounts() {
            return {
                all: this.goodsList.length,
                unpaid: this.goodsList.filter(o => o.status === 0).length,
                unsent: this.goodsList.filter(o => [1, 2].includes(o.status)).length,
                finished: this.goodsList.filter(o => o.status === 6).length,
                unreviewed: this.goodsList.filter(o => o.status === 7).length
            }
        }
    },

    methods: {
        // 获取状态文本
        getStatusText(status) {
            return this.statusTextMap[status] || '未知状态'
        },

        // 获取状态类型
        getStatusType(status) {
            return this.statusTypeMap[status] || 'info'
        },

        // 格式化价格
        formatPrice(price) {
            return Number(price || 0).toFixed(2)
        },

        // 查看订单详情
        viewOrderDetail(order) {
            this.currentOrder = { ...order }
            this.detailDialogVisible = true
        },

        // Tab切换
        handleTabChange() {
            this.currentPage = 1
        },

        // WebSocket消息显示
        showSocketMessage(message) {
            this.socketMessage = message
            if (this.socketTimer) {
                clearTimeout(this.socketTimer)
            }
            this.socketTimer = setTimeout(() => {
                this.socketMessage = ''
            }, 5000)
        },

        // 初始化WebSocket
        initWebSocket() {
            if (this.socket) {
                this.socket.close()
            }

            try {
                const userStr = getUser()
                if (!userStr) {
                    console.warn('用户信息不存在，无法建立WebSocket连接')
                    return
                }

                const user = JSON.parse(userStr)
                const userId = user.id
                const socketUrl = `ws://localhost:8090/imserver/${userId}`

                this.socket = new WebSocket(socketUrl)

                this.socket.onopen = () => {
                    console.log('WebSocket连接已建立')
                }

                this.socket.onmessage = (msg) => {
                    try {
                        const data = JSON.parse(msg.data)
                        this.showSocketMessage(`系统通知: ${data.contentText}`)
                        // 收到消息后刷新订单列表
                        this.loadData()
                    } catch (e) {
                        console.error('消息解析失败:', e)
                    }
                }

                this.socket.onclose = () => {
                    console.log('WebSocket连接已关闭')
                }

                this.socket.onerror = (err) => {
                    console.error('WebSocket错误:', err)
                }
            } catch (error) {
                console.error('WebSocket初始化失败:', error)
            }
        },

        // 文本截断
        truncateText(text, maxLength) {
            if (!text) return ''
            return text.length > maxLength
                ? text.substring(0, maxLength) + '...'
                : text
        },

        // 格式化日期时间
        formatDateTime(dateTime) {
            if (!dateTime) return ''
            const date = new Date(dateTime)
            const year = date.getFullYear()
            const month = (date.getMonth() + 1).toString().padStart(2, '0')
            const day = date.getDate().toString().padStart(2, '0')
            const hours = date.getHours().toString().padStart(2, '0')
            const minutes = date.getMinutes().toString().padStart(2, '0')
            return `${year}-${month}-${day} ${hours}:${minutes}`
        },

        // 加载数据
        async loadData() {
            try {
                this.listLoading = true
                const res = await getList({
                    page: this.currentPage,
                    pageSize: this.pageSize
                })

                if (res && res.data) {
                    this.goodsList = res.data.data || []
                    this.total = res.data.total || res.data.length || 0
                }
            } catch (error) {
                console.error('数据加载失败:', error)
                this.$message.error('订单数据加载失败，请稍后重试')
            } finally {
                this.listLoading = false
            }
        },

        // 页码变化
        handlePageChange(newPage) {
            this.currentPage = newPage
            this.loadData()
        },

        // 确认收货
        async handleConfirmReceipt(order) {
            try {
                await this.$confirm('确认收到商品了吗？', '确认收货', {
                    confirmButtonText: '确认收货',
                    cancelButtonText: '取消',
                    type: 'warning'
                })

                await confirmReceipt(order.id)

                // 更新订单状态
                order.status = 6

                // 关闭详情弹窗
                this.detailDialogVisible = false

                this.$message({
                    type: 'success',
                    message: '确认收货成功!'
                })

                // 刷新列表
                this.loadData()
            } catch (error) {
                if (error !== 'cancel') {
                    console.error('确认收货失败:', error)
                    this.$message.error('确认收货失败，请稍后重试')
                }
            }
        },

        // 处理支付
        handlePayment(order) {
            this.$message.info('跳转到支付页面...')
            // TODO: 实现支付逻辑
            console.log('处理支付', order)
        },

        // 查看物流
        async showLogistics(order) {
            try {
                this.currentLogisticsOrderId = order.id
                this.logisticsDialogVisible = true
                this.logisticsLoading = true

                const res = await showLogistics(order.id)

                if (res && res.data) {
                    this.logisticsInfo = res.data.data
                } else {
                    this.$message.warning('暂无物流信息')
                }
            } catch (error) {
                console.error('查看物流失败:', error)
                this.$message.error('物流信息加载失败，请稍后重试')
            } finally {
                this.logisticsLoading = false
            }
        },

        // 刷新物流信息
        async refreshLogistics() {
            if (!this.currentLogisticsOrderId) return

            try {
                this.logisticsLoading = true
                const res = await showLogistics(this.currentLogisticsOrderId)

                if (res && res.data) {
                    this.logisticsInfo = res.data.data
                    this.$message.success('物流信息已更新')
                }
            } catch (error) {
                console.error('刷新物流失败:', error)
                this.$message.error('刷新失败，请稍后重试')
            } finally {
                this.logisticsLoading = false
            }
        },

        // 获取物流状态类型
        getLogisticsStatusType(status) {
            const typeMap = {
                0: 'info',      // 待揽收
                1: 'primary',   // 运输中
                2: 'warning',   // 派送中
                3: 'success',   // 已签收
                4: 'danger'     // 异常
            }
            return typeMap[status] || 'info'
        },

        // 菜单选择处理
        handleMenuSelect(index) {
            this.activeMenu = index
            // 切换到订单页面时重新加载数据
            if (index === '1') {
                this.loadData()
            }
        },

        // 立即评价
        handleReview(order) {
            this.$message.info('跳转到评价页面...')
            // TODO: 实现评价逻辑
            console.log('立即评价', order)
        },

        // 初始化用户信息
        initUserInfo() {
            try {
                const userStr = getUser()
                if (userStr) {
                    const user = JSON.parse(userStr)
                    this.userInfo = {
                        headPicture: user.headPicture || '',
                        name: user.name || '用户'
                    }
                }
            } catch (error) {
                console.error('用户信息初始化失败:', error)
            }
        }
    },

    mounted() {
        this.initUserInfo()
        this.loadData()
        this.initWebSocket()
    },

    beforeDestroy() {
        if (this.socket) {
            this.socket.close()
        }
        if (this.socketTimer) {
            clearTimeout(this.socketTimer)
        }
    }
}
</script>

<style lang="less" scoped>
.jd-container {
    height: 100vh;
    background: #f5f5f5;

    .side-nav {
        background: #fff;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);

        .user-info {
            padding: 30px 20px;
            text-align: center;
            border-bottom: 1px solid #f0f0f0;

            .username {
                margin-top: 12px;
                font-size: 14px;
                color: #333;
                font-weight: 500;
            }
        }

        .nav-menu {
            border-right: none;

            /deep/ .el-menu-item {
                height: 50px;
                line-height: 50px;
                font-size: 14px;
                transition: all 0.3s;

                i {
                    margin-right: 8px;
                    font-size: 16px;
                }

                &:hover {
                    background-color: #f5f7fa;
                }

                &.is-active {
                    color: #e4393c;
                    background-color: #fff2f2;
                }
            }
        }
    }

    .main-content {
        padding: 20px 40px;
        overflow-y: auto;

        .order-content,
        .coupon-page,
        .other-page {
            width: 100%;
        }

        .coupon-page {
            // 移除优惠券组件的外层padding，因为组件内部已有padding
            margin: -20px -40px;
        }

        .other-page {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 400px;
        }

        .socket-notification {
            margin-bottom: 20px;
        }

        .order-status-tabs {
            background: #fff;
            padding: 10px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

            .badge-item {
                margin-left: 8px;
            }

            /deep/ .el-tabs__nav-wrap::after {
                height: 1px;
            }

            /deep/ .el-tabs__item {
                font-size: 15px;
                padding: 0 25px;

                &.is-active {
                    color: #e4393c;
                    font-weight: 500;
                }
            }
        }

        .order-list {
            margin-top: 20px;

            .order-item {
                background: #fff;
                margin-bottom: 15px;
                padding: 15px;
                border-radius: 4px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
                transition: all 0.3s;

                &:hover {
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                }

                .order-header {
                    display: flex;
                    align-items: center;
                    padding-bottom: 12px;
                    border-bottom: 1px solid #f0f0f0;

                    .order-time {
                        margin-right: 20px;
                        color: #666;
                        font-size: 13px;
                    }

                    .order-no {
                        flex: 1;
                        color: #999;
                        font-size: 13px;
                    }
                }

                .order-body {
                    display: flex;
                    padding: 15px 0;
                    align-items: flex-start;

                    .goods-info {
                        flex: 1;
                        display: flex;

                        .goods-img {
                            width: 80px;
                            height: 80px;
                            margin-right: 15px;
                            border: 1px solid #f0f0f0;
                            border-radius: 4px;
                            cursor: pointer;

                            .image-slot {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: 100%;
                                height: 100%;
                                background: #f5f5f5;
                                color: #999;
                                font-size: 24px;
                            }
                        }

                        .goods-detail {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;

                            .goods-title {
                                font-size: 14px;
                                margin-bottom: 8px;
                                color: #333;
                                line-height: 1.5;
                                font-weight: 500;
                            }

                            .goods-spec {
                                color: #999;
                                font-size: 12px;
                                margin-bottom: 5px;
                            }

                            .receiver-info {
                                color: #666;
                                font-size: 12px;
                                margin-bottom: 5px;
                            }

                            .address {
                                color: #999;
                                font-size: 12px;
                            }
                        }
                    }

                    .price-info {
                        width: 150px;
                        text-align: right;
                        padding-right: 20px;

                        .amount {
                            font-size: 16px;
                            color: #e4393c;
                            margin-bottom: 6px;
                            font-weight: 600;
                        }

                        .quantity {
                            color: #999;
                            font-size: 12px;
                            margin-bottom: 6px;
                        }

                        .total-amount {
                            color: #666;
                            font-size: 13px;
                            font-weight: 500;
                        }
                    }

                    .action-btns {
                        width: 120px;
                        display: flex;
                        flex-direction: column;
                        gap: 8px;

                        .el-button {
                            margin: 0;
                            width: 100%;
                        }
                    }
                }
            }
        }

        .pagination {
            margin-top: 30px;
            text-align: center;
            padding-bottom: 20px;
        }
    }
}

// 响应式调整
@media (max-width: 1200px) {
    .jd-container .main-content {
        padding: 15px 20px;
    }
}

// 物流弹窗样式
/deep/ .logistics-dialog {
    .el-dialog__body {
        padding: 15px 20px;
        max-height: 600px;
        overflow-y: auto;
    }

    .logistics-overview {
        margin-bottom: 20px;
        border: none;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;

        .el-card__body {
            padding: 20px;
        }

        .overview-header {
            .status-info {
                display: flex;
                align-items: center;
                gap: 15px;
                margin-bottom: 12px;

                .el-tag {
                    font-size: 14px;
                    padding: 5px 15px;
                }

                .order-id {
                    font-size: 13px;
                    opacity: 0.9;
                }
            }

            .address-info {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 14px;
                opacity: 0.95;

                i {
                    font-size: 16px;
                }
            }
        }
    }

    .logistics-timeline {
        padding: 20px 10px;

        .el-timeline {
            padding-left: 0;
        }

        .el-timeline-item {
            padding-bottom: 25px;

            /deep/ .el-timeline-item__timestamp {
                color: #909399;
                font-size: 13px;
                margin-bottom: 8px;
            }

            /deep/ .el-timeline-item__node--large {
                width: 16px;
                height: 16px;
                left: -2px;
            }

            .trace-card {
                border: 1px solid #ebeef5;
                transition: all 0.3s;

                &.latest {
                    border-color: #409eff;
                    background: #ecf5ff;

                    .trace-description {
                        color: #409eff;
                        font-weight: 600;
                    }
                }

                &:hover {
                    transform: translateX(5px);
                }

                .el-card__body {
                    padding: 15px;
                }

                .trace-content {
                    .trace-description {
                        font-size: 14px;
                        color: #303133;
                        line-height: 1.6;
                        margin-bottom: 8px;
                    }

                    .trace-location {
                        display: flex;
                        align-items: center;
                        gap: 5px;
                        font-size: 13px;
                        color: #606266;
                        margin-bottom: 8px;

                        i {
                            color: #409eff;
                        }
                    }

                    .courier-info {
                        margin-top: 12px;
                        padding-top: 8px;

                        .el-divider {
                            margin: 12px 0;

                            .el-divider__text {
                                background-color: #fff;
                                padding: 0 10px;
                                font-size: 13px;
                                color: #606266;
                                font-weight: 500;

                                i {
                                    margin-right: 4px;
                                }
                            }
                        }

                        .courier-details {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 8px;

                            .courier-tag {
                                padding: 4px 10px;

                                i {
                                    margin-right: 4px;
                                }
                            }
                        }
                    }

                    .trace-remark {
                        margin-top: 8px;

                        .el-tag {
                            i {
                                margin-right: 4px;
                            }
                        }
                    }
                }
            }
        }
    }

    .logistics-footer {
        padding: 15px 10px;
        text-align: right;
        border-top: 1px solid #ebeef5;
        background: #fafafa;
        margin: 0 -20px -15px;

        .update-time {
            font-size: 12px;
            color: #909399;
        }
    }
}
</style>